<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <style>
        #form-div {
            width: 500px;
            background-color: lightcyan;
            margin: 150px auto;
            padding: 30px;
        }
        #form-div .ele {
            width: 300px;
            margin: 20px auto 0;
            text-align: center;
        }
    </style>
</head>
<body>
<form id="frmLogin" action="success.html" method="post">
    <div id="form-div">
        <div class="ele">
            <label>用户名称</label>
            <input type="text" name="uname" id="uname">
            <div id="nameMsg" style="color: red"></div>
        </div>
        <div class="ele">
            <label>用户密码</label>
            <input type="text" name="pwd" id="pwd">
            <div id="pwdMsg" style="color: red"></div>
        </div>
        <div class="ele">
            <input type="button" value="登录" onclick="login()">
        </div>
    </div>
</form>

<script>

    function login(){

        //1、拿到  用户输入的uname  判断 是否合法
        let uname = document.querySelector("#uname").value;
        /**
         *  ^   开始位置
         *  [A-za-z]    字符一个
         *  [\w]        字符 + 数字 {5,9} 5到9位
         *  $   开始位置
         */
        let regName = /^[A-Za-z]\w{5,9}$/
        if (!regName.test(uname)) {
            document.getElementById('nameMsg').innerHTML = '用户名必须字母开头，6到10位'
            return; // 结束函数的运行
        }
        //      提醒 不合法

        //2、拿到  用户输入的pwd    判断 是否合法
        let pwd = document.querySelector("#pwd").value;
        //      提醒 不合法
        let regPwd = /^[A-Za-z]{2}\w{6,8}$/

        if (!regPwd.test(pwd)){
            document.getElementById('pwdMsg').innerHTML = '密码必须是开始2位是字母，8到10位'
            return; // 结束函数的运行
        }

        //拿到表单 提交数据
        document.querySelector("#frmLogin").submit()
    }

</script>

</body>
</html>